<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/main.css" type="text/css">
    <title>ECharts</title>
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let color = ['#ff4343', '#f69846', '#f6d54a', '#45dbf7', '#f69846', '#44aff0', '#4777f5', '#5045f6', '#ad46f3', '#f845f1'];

    let total = 0;

    function initData(data) {
        let list = [];
        for (let i in data) {
            total += data[i].value;
        }
        for (let i in data) {
            list.push({
                value: data[i].value,
                name: data[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 20,
                        borderColor: color[i],
                        shadowColor: color[i],
                        color: color[i]
                    }
                }
            }, {
                value: total / 30,
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            })
        }
        return list;
    }

    let option = {
        backgroundColor: '#04243E',
        tooltip: {
            show: false
        },
        legend: {
            orient: 'vertical',
            data: [],
            icon: 'circle',
            right: '18%',
            top: '40%',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        series: [{
            name: '',
            type: 'pie',
            clockWise: false,
            startAngle: '90',
            center: ['50%', '50%'],
            radius: ['50%', '51%'],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: function (params) {
                            let percent = ((params.value / total) * 100).toFixed(1)
                            let name = params.name.replace(/\n/g, '')
                            if (params.name !== '') {
                                return '{white|' + name + ":" + percent + '%}'
                            } else {
                                return ''
                            }
                        },
                        rich: {
                            white: {
                                align: 'center',
                                padding: [3, 0],
                                fontSize:20
                            }
                        },
                    },
                    labelLine: {
                        length: 40,
                        length2: 100,
                        show: true,
                        color: '#00ffff'
                    }
                }
            },
            data: [],
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return idx * 50;
            }
        },
            {
                name: '',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['49%', '49%'],
                itemStyle: {
                    color: 'transparant'
                },
                startAngle: '90',
                data: [{
                    value: total,
                    name: '',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{c|{c}}',
                            rich: {
                                c: {
                                    color: 'rgb(98,137,169)',
                                    fontSize: 50,
                                    fontWeight: 'bold',
                                    lineHeight: 5
                                }
                            },
                            textStyle: {
                                fontSize: 28,
                                fontWeight: 'bold'
                            },
                            position: 'center'
                        }
                    }
                }]
            }
        ]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : '/pie/one',
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                option.series[0].data = initData(result.data.series[0].data);
                option.series[1].data[0].value = total;
                if (result.data.legend && option.legend) {
                    option.legend.data = result.data.legend;
                }else if(option.legend){
                    let legend = [];
                    result.data.series[0].data.forEach(function (item,index) {
                        legend.push(item.name);
                    });
                    option.legend.data = legend;
                }
                if (result.data.title && option.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
